<template>
  <div id="app">
    <el-container>
      <el-header><NavBar></NavBar></el-header>
      <el-container style="margin-top: 5vh; height: 87vh">
        <el-aside
          width="220px"
          v-if="this.$store.state.user.isLogin"
          style="margin-left: 20px"
        >
          <SideBar></SideBar>
        </el-aside>
        <el-container>
          <el-main style="padding: 0px; padding-left: 20px">
            <el-collapse-transition>
              <div v-show="$store.state.contentShow">
                <router-view style="height: 85vh; width: 98%" />
              </div>
            </el-collapse-transition>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import NavBar from "./components/NavBar.vue";
import SideBar from "./components/SideBar.vue";
export default {
  name: "app",
  components: {
    NavBar,
    SideBar,
  },
  created() {},
  data() {
    return {};
  },

  methods: {},
};
</script>
<style scoped>
#app {
  background-image: url("@/assets/background.png");
  background-size: cover;
}

/* .el-collapse-transition-enter-active {
  transition: height 3s;
}

.el-collapse-transition-leave-active {
  transition: height 3s;
} */
</style>
